<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen"/>
    <link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print"/>
    <title>Flying Saucer: CSS Positioned Content Support</title>
    <style type="text/css">
        p.demo {
            margin: 2px 40px 0px 0px;
            padding: 5px;
        }

        div.demo {
            border: 0px;
            margin: 2px 0px 0px 0px;
            padding: 5px;
        }

        .rel-exp b {
            position: relative;
            left: 10px;
            top: -10px;
        }

        .abs-exp {
            border: 1px solid blue;
            margin: 2px 40px 0px 0px;
            padding: 5px;
            position: absolute;
            width: 100px;
            top: 300px;
            right: -5px;
        }

        .fx-exp {
            position: fixed;
            width: 200px;
            bottom: 0px;
            left: 0px;
            margin: 0px;
            padding: 5px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<p class="link left-link"><a href="demoNav:back">Previous Page</a></p>

<p class="link right-link"><a href="demoNav:forward">Next Page</a></p>

<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
    <span id="pagebyline">CSS 
      <span style="position: relative; top: -5px;">Positioned</span> 
      <span style="position: relative; top: 10px;">Text</span> 
      Support
    </span>
<br/>

<p><b>Positioned content support includes</b>: One of CSS's big features is positioned content. Flying Saucer supports
    static (normal), absolute, relative, and fixed content, as well as floats
    with clears.</p>
<br/>

<p class="demo">This is static content. This is the default.</p>

<p class="demo rel-exp">The bold text <b>here</b> is offset by 10px using
    relative positioning</p>

<p class="demo">To the right is some absolute content. It is positioned 300px down and 5px from the right.</p>

<p class="abs-exp">Absolute</p>

<p class="demo">text</p>
<img src="images/flyingsaucer.png" style="float: left; padding-right: 10px;" height="31" width="37"/>

<div class="demo">A floating saucer to the left! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tellus id risus pulvinar tristique. Duis euismod.
    Quisque varius, metus et tempor aliquet, arcu mi euismod massa, sed porttitor dolor nibh sed ipsum. Vestibulum ante
    ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ultricies dolor a odio. Nullam vitae
    est nec dui porttitor pretium. Aliquam malesuada consectetur quam. Mauris ornare erat ac enim. Nulla facilisi. Nam
    vel orci. Suspendisse egestas eros ut risus. Vestibulum aliquet porta nulla. Proin eget ipsum. Vivamus ligula.</div>
<div style="clear: both;" class="demo">All clear! No saucers in sight!</div>
<img src="images/flyingsaucer.png" style="float: right; padding-right: 10px;" height="31" width="37"/>

<div class="demo">A floating saucer to the right!  Aliquam malesuada consectetur quam. Mauris ornare erat ac enim. Nulla facilisi. Nam
    vel orci. Suspendisse egestas eros ut risus. Vestibulum aliquet porta nulla. Proin eget ipsum. Vivamus ligula. Morbi
    ornare, ipsum dapibus tempor tempus, urna magna vestibulum purus, in gravida odio tellus non sapien. Vestibulum
    tincidunt. Curabitur varius arcu. Curabitur quis nibh vitae nibh tincidunt blandit. Maecenas faucibus tristique
    diam.</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tellus id risus pulvinar tristique. Duis euismod.
    Quisque varius, metus et tempor aliquet, arcu mi euismod massa, sed porttitor dolor nibh sed ipsum. Vestibulum ante
    ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ultricies dolor a odio. Nullam vitae
    est nec dui porttitor pretium. Aliquam malesuada consectetur quam. Mauris ornare erat ac enim. Nulla facilisi. Nam
    vel orci. Suspendisse egestas eros ut risus. Vestibulum aliquet porta nulla. Proin eget ipsum. Vivamus ligula. Morbi
    ornare, ipsum dapibus tempor tempus, urna magna vestibulum purus, in gravida odio tellus non sapien. Vestibulum
    tincidunt. Curabitur varius arcu. Curabitur quis nibh vitae nibh tincidunt blandit. Maecenas faucibus tristique
    diam.
</p>

<p>
    Maecenas tortor. Duis iaculis. Nulla facilisi. Donec rhoncus, tortor eget ornare luctus, orci eros tristique leo,
    non interdum leo ante luctus ante. Aliquam scelerisque orci eu lacus imperdiet congue. Cras tellus purus, interdum
    id, lobortis id, consectetur et, nibh. Ut et odio. Donec semper lacinia augue. Proin vel risus. Morbi ut sem ut nunc
    malesuada tempor. Pellentesque sollicitudin augue at est. Sed vitae lorem nec massa mollis viverra. Nam lobortis.
    Sed iaculis mollis nunc. Sed risus. Pellentesque sed metus. Duis bibendum laoreet lectus. Class aptent taciti
    sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vel tortor.
</p>

<p>
    Quisque bibendum nunc non mi. Duis placerat. Fusce fringilla. Duis ullamcorper. Suspendisse posuere aliquet eros.
    Pellentesque lacinia ultrices ligula. Suspendisse potenti. Donec iaculis, dolor eget interdum scelerisque, ipsum
    nisl faucibus diam, in suscipit urna turpis sed nisi. Donec eget turpis eu libero rhoncus imperdiet. Ut pretium,
    purus in blandit commodo, augue nisl elementum quam, eu luctus nulla ante eu neque. Donec ac nisl. Sed lobortis.
    Phasellus magna.
</p>

<p>
    Sed ligula nunc, placerat quis, fringilla id, gravida non, neque. Donec sagittis consequat purus. Maecenas a metus
    in lacus ultricies laoreet. Quisque sed ligula id mi iaculis faucibus. Sed mattis, est ut luctus luctus, eros erat
    interdum nibh, ac molestie nisl risus a lectus. Donec posuere commodo enim. Donec et augue. Ut a metus ut mi
    malesuada mattis. In suscipit. Pellentesque interdum elit vitae turpis. Cras mi leo, scelerisque sit amet, vehicula
    sit amet, sodales sit amet, turpis. Etiam sit amet mauris.
</p>

<p>
    Ut malesuada sollicitudin neque. Donec justo. Donec vehicula. Duis hendrerit magna at justo. Integer scelerisque
    dapibus diam. Nulla consequat. Duis purus felis, sollicitudin a, pretium at, sollicitudin a, velit. Pellentesque in
    velit id ipsum feugiat bibendum. Mauris elit lectus, viverra quis, scelerisque consectetur, pharetra non, erat.
    Integer congue diam nec quam.
</p>

<p>
    Mauris sit amet neque nec mauris accumsan convallis. Phasellus felis. Nullam egestas elit id quam. Maecenas et magna
    vel neque venenatis dapibus. Vestibulum condimentum tempus mi. Proin eget urna sit amet nunc euismod lobortis. Donec
    ullamcorper, urna vel pellentesque dignissim, lorem arcu fringilla leo, non mollis est metus sed elit. Nunc quis
    lectus eleifend neque interdum vehicula. Fusce commodo. Aliquam pellentesque sem non erat. Nulla risus tortor,
    ultrices vitae, ultricies eu, ullamcorper in, dui.
</p>

<p>
    Suspendisse faucibus sapien nec justo. Aliquam nec diam a ligula fermentum facilisis. Fusce tempus est non mi.
    Phasellus tempor nulla vel leo. Suspendisse semper justo faucibus dui dignissim ultrices. Vestibulum mauris felis,
    elementum nec, sollicitudin in, cursus nec, mauris. Vestibulum pharetra dignissim justo. Proin consequat nisl eget
    neque. Nulla facilisi. Sed felis nibh, aliquam sed, auctor in, fermentum id, tortor.
</p>

<p>
    Vivamus adipiscing sollicitudin ligula. Quisque at turpis. Maecenas luctus. Aliquam rhoncus nibh. Mauris hendrerit,
    eros ac gravida dapibus, lacus arcu fermentum urna, sit amet suscipit magna augue vel ipsum. Cras gravida congue
    sem. Duis sit amet magna. Cras varius euismod massa. Quisque massa. Pellentesque sapien mauris, pretium quis,
    ultricies at, auctor et, ligula. Phasellus massa turpis, cursus at, tincidunt ut, feugiat sit amet, magna. Quisque
    vestibulum fermentum nunc. Fusce ut eros nec sem rutrum adipiscing. Ut mi. Aliquam erat volutpat. Duis ac sem.
    Integer rutrum nulla at diam.
</p>

<p>
    Etiam scelerisque, nibh non interdum vehicula, enim enim lobortis mauris, in semper orci erat sed odio. Aliquam vel
    sapien in tellus pharetra porta. Vivamus urna. Cras nec nibh. Morbi porttitor, sem non gravida ultricies, arcu
    mauris iaculis augue, non hendrerit tortor eros vitae nibh. Curabitur ac mi ut erat venenatis aliquam. Sed lectus
    erat, ultrices et, dapibus eu, pulvinar faucibus, nibh. Sed faucibus lacus vitae sapien. Aliquam imperdiet, ante nec
    ultricies aliquet, mauris velit semper tellus, id pretium purus nibh nec enim. In euismod. Donec egestas lectus. Cum
    sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur magna erat, congue
    vitae, adipiscing rhoncus, commodo id, elit. Vestibulum nec nisi ac dui commodo feugiat. Maecenas nec velit sit amet
    metus aliquam ultricies. Quisque ut velit.
</p>

<p>
    Nulla massa velit, adipiscing sit amet, vehicula a, gravida at, lacus. Sed cursus congue risus. Donec ut enim sit
    amet purus feugiat cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Quisque condimentum hendrerit mi. Donec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae; Sed ipsum. Sed tristique aliquam erat. Donec nec metus. Donec bibendum. Nam congue leo in
    lacus. Nunc luctus laoreet nisl. Cras sagittis luctus elit. Curabitur eu augue eget mauris ullamcorper lobortis.
    Etiam porta purus non diam. Mauris lorem. Pellentesque consequat diam sed erat. Vestibulum commodo sem. Aliquam ut
    nisi.
</p>

<p>
    Phasellus eget mauris non quam pretium laoreet. Ut eros nunc, eleifend eget, hendrerit laoreet, volutpat quis,
    lorem. Maecenas fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Mauris in nulla. Duis laoreet pretium tellus. Etiam lobortis, dui a viverra adipiscing, nunc diam
    vestibulum dui, et tempor enim purus sit amet metus. Suspendisse semper, ipsum at sollicitudin viverra, augue lectus
    laoreet nunc, eu interdum lectus sapien nec elit. Curabitur et nibh lacinia libero bibendum ultrices. Fusce iaculis
    nibh in diam. Proin at lorem non felis euismod gravida. In hac habitasse platea dictumst. Lorem ipsum dolor sit
    amet, consectetur adipiscing elit. Nulla eu urna. Nunc eu lorem. Nunc urna lorem, vestibulum non, laoreet et, congue
    at, mi. Pellentesque non orci. Nunc eu metus.
</p>

<p>
    Ut commodo dolor sit amet mi. Fusce tincidunt. Fusce dignissim magna vitae nisi. Integer non enim eu leo porttitor
    congue. Praesent sed orci. Aliquam egestas erat ut quam. Sed eleifend lacinia lacus. Nunc aliquet, mi non blandit
    malesuada, sapien diam dapibus lectus, vel consectetur ante lacus a massa. Aliquam lectus magna, bibendum sed,
    facilisis ut, consequat eu, est. Nam eleifend aliquam lorem. Integer auctor consectetur enim. Sed eleifend justo ut
    diam. Maecenas enim massa, cursus ut, vehicula gravida, mollis feugiat, lorem.
</p>

<p>
    Vestibulum quis purus in dui convallis semper. Curabitur risus. Aliquam ultrices eleifend libero. Curabitur a ante
    quis justo viverra scelerisque. Nullam ut turpis. Proin fermentum vehicula mauris. Suspendisse egestas nisi sit amet
    metus. Fusce sodales eros id augue. Duis dui. Suspendisse tristique erat. Cras sollicitudin adipiscing nibh. Ut
    quam. Donec in lacus id lacus gravida adipiscing. Etiam molestie consectetur purus. Ut leo velit, pulvinar ac,
    placerat sed, mattis in, dui. Nulla ornare pulvinar orci. Ut enim.
</p>

<p>
    Nunc gravida justo eget massa laoreet sagittis. Nulla at sem non arcu fringilla pretium. Duis ut nisl. In hac
    habitasse platea dictumst. Integer quis felis. Vivamus vulputate. In elementum, erat vel hendrerit ultricies, orci
    lacus venenatis est, venenatis facilisis enim sapien vel elit. Mauris sed turpis quis nulla lacinia semper. Duis ut
    tortor sed tellus commodo tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
    cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
    volutpat velit vel dui. Aenean commodo neque ut diam. Duis ut dui. Vivamus nec sapien et nibh facilisis tristique.
</p>

<p>
    Nunc malesuada aliquam eros. Aliquam justo turpis, sodales vel, vulputate eu, pretium non, ante. Nulla blandit
    tincidunt orci. Nam tristique mollis dui. Fusce nec risus. In placerat tempus dui. Cras quis diam. Fusce aliquet
    magna id ante. Morbi ultrices viverra leo. Cras risus tellus, ullamcorper vel, auctor at, egestas eu, risus.
</p>

<p>
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin iaculis, est ac gravida
    dapibus, urna justo fermentum libero, quis venenatis enim odio ornare mauris. Donec interdum purus sollicitudin
    tortor. Ut elementum. Phasellus dictum, odio nec iaculis tincidunt, sapien odio vulputate dui, et pulvinar diam
    libero ut arcu. Aenean a sapien. Vivamus eu nisl. Cras gravida, massa ornare sodales varius, tortor purus venenatis
    urna, semper posuere mi felis nec eros. Nunc enim. Morbi accumsan massa sit amet massa. Vestibulum ut elit. Integer
    at lectus ut nunc ornare egestas. Nam ultrices erat non sapien. Nam libero risus, aliquet vel, hendrerit sit amet,
    tempus vitae, augue. Curabitur et nisi. Quisque rhoncus venenatis nisi. Donec at metus blandit elit interdum
    faucibus. Sed porttitor.
</p>

<p>
    Cras adipiscing lacus vel erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Vivamus quis nibh et arcu dictum tempor. Duis in purus. Praesent est ligula, placerat suscipit, commodo
    quis, laoreet malesuada, leo. In et lectus. Aenean hendrerit. Suspendisse enim turpis, dignissim vitae, posuere nec,
    tempus id, mauris. Morbi eu leo rutrum arcu varius hendrerit. Nulla magna. Proin a mi rhoncus elit posuere
    tincidunt. Morbi molestie malesuada lorem. Aenean malesuada pulvinar ligula. Donec iaculis molestie turpis. Morbi
    risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc quis risus eu lectus elementum
    scelerisque. Nam molestie nisi vitae lorem.
</p>

<p>
    Donec risus. Aliquam nec nibh. Cras leo lectus, interdum eu, facilisis non, faucibus mollis, orci. Fusce volutpat
    dolor quis massa. Vestibulum ac libero ut ipsum commodo pellentesque. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. Pellentesque eget dolor. Ut facilisis tortor id libero. Nulla sodales
    rhoncus arcu. Duis eu nibh. Phasellus a magna posuere felis posuere egestas. Cras sem. Praesent eget erat quis quam
    dignissim porttitor. Nam cursus. Sed facilisis. Donec turpis elit, adipiscing imperdiet, lacinia vitae, placerat
    eget, enim.
</p>

<p>
    Fusce dapibus. Pellentesque ante mauris, dapibus in, aliquam viverra, tristique id, tortor. Pellentesque fringilla
    viverra tortor. Quisque metus. Etiam laoreet sapien ut dui. Suspendisse a enim tempus orci porttitor mollis. Integer
    eget tellus quis turpis vulputate adipiscing. Vivamus accumsan felis. Proin sed elit eget sapien commodo molestie.
    Integer at enim. Sed interdum elit non tortor. Praesent lobortis dui sit amet lacus. Ut sem diam, euismod et, luctus
    in, pretium eget, augue. In hac habitasse platea dictumst. Pellentesque sodales sodales nulla. Pellentesque sit amet
    augue.
</p>

<p>
    Vivamus et augue. Proin neque risus, consequat eget, dapibus in, ultricies nec, odio. Aenean rutrum semper mi. Etiam
    gravida orci id mi. Phasellus diam turpis, lobortis quis, semper tristique, sollicitudin sit amet, sem. Curabitur
    tincidunt, arcu non laoreet ultricies, eros lectus porta est, ullamcorper consectetur dui urna id elit. Curabitur
    metus libero, sagittis in, pharetra in, ultricies quis, arcu. Nunc euismod, velit eu facilisis fermentum, metus
    mauris cursus ante, rhoncus condimentum lacus augue ac tellus. Praesent ultrices lectus id libero rhoncus egestas.
    Vivamus dignissim, quam eget blandit congue, velit elit tincidunt felis, in gravida libero ipsum in quam. Sed porta
    augue vitae nulla. Morbi quam neque, sollicitudin quis, rutrum id, tristique vitae, turpis. Morbi tristique purus
    eget lorem aliquam volutpat. Integer feugiat nulla ac nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

<p class="fx-exp">This is fixed content. It should be fixed even when the screen scrolls.</p>

</body>
</html>
